<template>
  <!-- 折叠 -->
  <el-container direction="vertical" :style="containerCollapse ? 'width:60px' : 'width:200px'">
    <div class="toggle-button" @click="containerCollapse = !containerCollapse">
      <el-icon-expand v-if="containerCollapse" />
      <el-icon-fold v-else />
    </div>
    <!-- 调用方声明 menu 插槽时 -->
    <slot />
  </el-container>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'

// 父组件需要 v-model:collapse
let props = defineProps({
  collapse: {
    type: Boolean, // 折叠与展开
    default: false,
  },
})

const emits = defineEmits(['update:collapse'])

const containerCollapse = ref(props.collapse)

watch(
  () => containerCollapse.value,
  val => {
    emits('update:collapse', val) // 修改 visible的值
  },
)
</script>

<style lang="less">
.el-aside {
  height: 100vh;
}

.el-container {
  height: 100%;
}

.toggle-button {
  // svg 放在外层会导致 route-view中的 progress circle 显示过小
  svg {
    width: 1em;
    height: 1em;
  }
  // 添加背景颜色
  background-color: #4a5064;
  // 设置文本大小
  font-size: 20px;
  // 设置文本行高
  line-height: 24px;
  // 设置文本颜色
  color: #fff;
  // 设置文本居中
  text-align: right;
  // 设置文本间距
  letter-spacing: 0.5em;
  // 设置鼠标悬浮变小手效果
  cursor: pointer;
  padding-right: 1em;
}
</style>
